<template>
  <div class="contant">
    <img src="/static/imgs/hero/firstBg.png" alt="" class="firstBg">
    <img :src="'http://www.kaimou.net/sanguoImgs/'+hero[3]+'.jpg'" alt="" class="heroPic">
    <img src="/static/imgs/hero/againClose.png" alt="" class="againClose" @click="closeBtn">
    <img src="/static/imgs/hero/againBtn.png" alt="" class="againBtn" @click="extract">
    <!--<div class="charts">-->
      <!--<img src="/static/imgs/hero/shuju.png" alt="" class="chartsPic">-->
      <div id="myChart" style="width: 200px; height: 200px;position: absolute;top: 44%;left: 0;" class="myChat"></div>
    <!--</div>-->
    <com-tab></com-tab>
  </div>
</template>

<script>
  import tab from '@/components/tab'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'extractAgain',
    data () {
      return {
        hero: []
      }
    },
    mounted () {
      this.hero = this.$route.query.data.toString().split(',');
      this.drawLine();
      Indicator.close();
  },
    watch: {
      $route(){
        this.hero = this.$route.query.data.toString().split(',');
        this.drawLine();
      }
    },
  methods : {
    extract () {
      this.$store.commit('openExtract');
      this.$store.commit('openHasMoney');
    },
    closeBtn () {
      this.$router.push({path: '/hero'})
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      let that = this;
      console.log(that.hero);
      // 绘制图表
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center'
        },
        radar: [
          {
            indicator: [
              {text: '武力', max: 100},
              {text: '统率', max: 100},
              {text: '政治', max: 100},
              {text: '防御', max: 100},
              {text: '魅力', max: 100},
              {text: '智力', max: 100}
            ],
            radius: 50
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [
              {
                value: that.hero.splice(4),
              }
            ]
          }
        ]
      });
    }
  },
  components: {
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    .firstBg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .againBtn{
      width: 82%;
      position: absolute;
      left: 9%;
      bottom: 14%;
      z-index: 3;
    }
    .againClose{
      width: 12%;
      position: absolute;
      right: 5%;
      top: 13%;
      z-index: 10;
    }
    .heroPic{
      width: 100%;
      margin-top: 17%;
      height: 80%;
    }
    /*.charts{*/
      /*position: relative;*/
      /*.chartsPic{*/
        /*width: 100%;*/
        /*transform:rotate(60deg);*/
      /*}*/
    /*}*/
  }
</style>
